<template>
	<view>
		<carHeader :title="'经营统计'">
		</carHeader>
		<view class="one">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="scroll-view-item_H" 
				v-for="(tab,index) in tabBars" 
				:key="tab.id" 
				:id="tab.id"
				:class="navIndex==index ? 'activite' : ''" 
				@click="checkIndex(index)">
				{{tab.name}}
				</view>
			</scroll-view>
			<u-icon class="img" size="25" name="order"></u-icon>
			<view class="xuanze">
				<uni-combox class="x" :candidates="candidates" placeholder="自定义" v-model="city" @input="comboxInput">
				</uni-combox>
			</view>
			<!-- 内容切换 -->
			<view class="content" v-if="navIndex==0">

				<view class="one-one">
					<view class="one-one-one">
						<image class="img1" src="../../static/车联网服务商家端-02经营统计_slices/收入@2x.png"></image>

					</view>
					<view class="jine1">${{totalIncome.totalPrice}}</view>
					<view class="text1">收入</view>
					<view class="one-one-two">
						<image class="img2" src="../../static/车联网服务商家端-02经营统计_slices/订单-全部订单@2x.png"></image>
					</view>
					<view class="jine2">{{totalIncome.totalOrders}}</view>
					<view class="text2">订单</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==1">
				<view class="one-one">
					<view class="one-one-one">
						<image class="img1" src="../../static/车联网服务商家端-02经营统计_slices/收入@2x.png"></image>
					</view>
					<view class="jine1">$2066.56</view>
					<view class="text1">收入</view>
					<view class="one-one-two">
						<image class="img2" src="../../static/车联网服务商家端-02经营统计_slices/订单-全部订单@2x.png"></image>

					</view>
					<view class="jine2">53</view>
					<view class="text2">订单</view>
				</view>
			</view>


		</view>
		<view class="two">
			<view class="title1">收入分布</view>
			<template>
			  <view class="charts-box">
			    <qiun-data-charts 
			      type="pie"
			      :opts="opts1"
			      :chartData="chartData1"
			    />
			  </view>
			</template>
		</view>
		
		<view class="three">
			<view class="title2">订单分布</view>
			<view>
				<template>
					<view class="charts-box">
						<qiun-data-charts 
						type="column" 
						:opts="opts2" 
						:chartData="chartData2" 
						:canvas2d="true"
						canvasId="CqGeSyMzQrfdHhqhYCEGkgfKquejNdhd" 
						/>
					</view>
				</template>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				chartData1: {},
				chartData2: {},
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},
					}
				},
				opts2:{
				        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				        padding: [15,15,0,5],
				        enableScroll: false,
				        legend: {},
				        xAxis: {
				          disableGrid: true
				        },
				        yAxis: {
				          data: [
				            {
				              min: 0
				            }
				          ]
				        },
				        extra: {
				          column: {
				            type: "group",
				            width: 30,
				            activeBgColor: "#000000",
				            activeBgOpacity: 0.08
				          }
				        }
				      },
					processedData: [],
					processedData2:[],
					names:[],
					values:[],
					totalIncome:{},
					time:null,
				candidates: ["一周内", "一个月内", "三个月内", "半年内", "一年内"],
				city: "",
				navIndex: 0,
				tabBars: [{
					name: '今日',
					id: 'guanzhu'
				}, {
					name: '昨日',
					id: 'tuijian'
				}],
			}
		},
		onShow() {
			this.setTodayDate();
			this.getServerData1();
			this.getServerData2();
			this.getTotalIncome();
			this.getMerchant();
		},
		methods: {
			comboxInput(e) {
				console.log("当前输入的值：", e);
			},
			checkIndex(index) {
				this.navIndex = index;
				if (this.navIndex==0) {
					this.setTodayDate();
					this.clear();
					this.getServerData1();
					this.getServerData2();
				} else{
					this.setYesterdayDate()
					this.clear();
					this.getServerData1();
					this.getServerData2();
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			getServerData1() {
				uni.request({
					url:"http://localhost:8080/carShopService/statistics/list",
					data:{
						pageNum:1,
						pageSize:10,
						ordOrderTime:this.time
					},
					success: (res)=>{
						this.processedData=res.data.rows	
					}
				}),
				
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: this.processedData
						}]
					};
					this.chartData1 = JSON.parse(JSON.stringify(res));
					console.log("饼状图返回值")
					console.log(this.chartData1)
				}, 500);
			},
			getServerData2() {
				console.log("时间是")
				console.log(this.time)
				uni.request({
					url:"http://localhost:8080/carShopService/statistics/orderCount",
					data:{
						ordOrderTime:this.time
					},
					success: (res)=>{
						this.processedData2=res.data.rows
						this.jsonToArray();
					}
				}),

				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.names,
						series: [
							{
								name: "订单量",
								data: this.values
							}
						]
					};
					this.chartData2 = JSON.parse(JSON.stringify(res));
					console.log("柱状图返回值")
					console.log(this.chartData2)
				}, 500);
			},
			jsonToArray(options) {
					this.names=[];
					this.values=[];
					const jsonArray = this.processedData2;
			        // 遍历JSON数组
			        for (let i = 0; i < jsonArray.length; i++) {
			            const item = jsonArray[i];
			            this.names.push(item.name);
			            this.values.push(item.value);
			        }
			},
			getTotalIncome(){
				uni.request({
					url:"http://localhost:8080/carShopService/statistics/getTodayDingdan",
					success: (res)=>{
						this.totalIncome = res.data
					}
				});
			},
			setTodayDate() {
			      const today = new Date();
			      const year = today.getFullYear();
			      const month = String(today.getMonth() + 1).padStart(2, '0');
			      const day = String(today.getDate()).padStart(2, '0');
			      this.time = `${year}-${month}-${day}`;
			    },
			setYesterdayDate() {
			  const yesterday = new Date();
			  yesterday.setDate(yesterday.getDate() - 1);
			  const year = yesterday.getFullYear();
			  const month = String(yesterday.getMonth() + 1).padStart(2, '0');
			  const day = String(yesterday.getDate()).padStart(2, '0');
			  this.time = `${year}-${month}-${day}`;
			},
			clear(){
				this.chartData1=null;
				this.chartData2=null;
			},
			getMerchant(){
				uni.request({
					url:"http://localhost:8080/carShopService/statistics/loadInfo",
					success: (res)=>{
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.three {
		.charts-box {
			width: 100%;
			height: 300px;
		}
	}

	.two {
		.charts-box {
			width: 100%;
			height: 200px;
		}
	}

	.one {
		background-color: white;
		width: 80%;
		height: 400rpx;
		position: absolute;
		top: 50px;
		left: 40px;
		border-radius: 10px;

		.img {
			position: absolute;
			top: 60rpx;
			right: 170rpx;
		}

		.xuanze {
			.x {
				width: 120rpx;
				position: absolute;
				top: 50rpx;
				right: 10rpx;
			}
		}


		.activite {
			color: white;
			background-color: #2f81fa
		}

		.content {
			/* background: #008000; */
			height: 300px;

			.one-one {
				.jine1 {
					position: absolute;
					top: 270rpx;
					left: 130rpx;
				}

				.text1 {
					position: absolute;
					top: 320rpx;
					left: 165rpx;
				}

				.jine2 {
					position: absolute;
					top: 270rpx;
					right: 172rpx;
				}

				.text2 {
					position: absolute;
					top: 320rpx;
					right: 165rpx;
				}

				.one-one-one {
					height: 80rpx;
					width: 80rpx;
					background-color: #ffa86c;
					border-radius: 10px;
					position: absolute;
					margin-top: 50rpx;
					margin-left: 150rpx;

					.img1 {
						height: 40rpx;
						width: 40rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
				}

				.one-one-two {
					height: 80rpx;
					width: 80rpx;
					background-color: #52a3ff;
					border-radius: 10px;
					position: absolute;
					margin-top: 50rpx;
					right: 150rpx;

					.img2 {
						height: 40rpx;
						width: 40rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			color: #CCCCCC;
			margin-left: 70px;
			color: #2f81fa;



		}

		.scroll-view-item_H {
			display: inline-block;
			width: 20%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			padding: 10px 0;
			margin-top: 20px;

		}

	}

	.two {
		background-color: white;
		width: 80%;
		height: 400rpx;
		position: absolute;
		top: 260px;
		left: 40px;
		border-radius: 10px;

		.title1 {
			font-size: 35rpx;
			font-weight: 500;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}

	.three {
		background-color: white;
		width: 80%;
		height: 400rpx;
		position: absolute;
		top: 470px;
		left: 40px;
		border-radius: 10px;

		.title2 {
			font-size: 35rpx;
			font-weight: 500;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>